<template>
  <div>
    <h3>会员中心</h3>
    <div class="me">
      <div class="me-info">
        <div class="portrait">
          <img
            v-if="name"
            src="../../assets/toux-2.jpg"
            alt=""
            @click="userinfo"
          />
          <img v-else src="../../assets/toux-1.png" alt="" />
        </div>

        <span v-if="name">{{ name }}</span>
        <span v-else @click="loginRegion">立即登录</span>
      </div>
      <div class="blackCard">
        <i>黑金卡</i>
        <i>立即开通</i>
      </div>
    </div>
    <div class="main">
      <div class="order">
        <div class="order-1">
          <span>我的订单</span><icon name="arrow" color="#1989fa" />
        </div>
        <grid>
          <grid-item icon="completed" text="待付款" />
          <grid-item icon="pending-payment" text="代发货" />
          <grid-item icon="logistics" text="待收货" />
          <grid-item icon="sign" text="已收货" />
        </grid>
      </div>
      <div class="order">
        <grid square>
          <grid-item icon="description" text="我的表单" />
          <grid-item icon="vip-card-o" text="我的会员卡" />
          <grid-item icon="points" text="我的积分" />
          <grid-item icon="coupon-o" text="我的优惠券" />
          <grid-item icon="gold-coin-o" text="我的余额" />
          <grid-item icon="font-o" text="我的砍价" />
          <grid-item icon="bullhorn-o" text="推广员中心" />
          <grid-item icon="user-circle-o" text="收货人信息" />
          <grid-item
            v-if="name"
            icon="wap-home-o"
            @click="exitLogin"
            text="退出登录"
          />
        </grid>
      </div>
      <div class="info">由贝斯科技技术提供支持</div>
    </div>
  </div>
</template>

<script>
import { Grid, GridItem, Icon } from "vant";
export default {
  data() {
    return {
      name: "",
    };
  },
  components: {
    Grid,
    GridItem,
    Icon,
  },
  mounted() {
    this.name = localStorage.getItem("user");
  },
  methods: {
    loginRegion() {
      this.$router.push("/login");
    },
    exitLogin() {
      console.log("退出登录");
      console.log(this.name);
      this.$router.options.routes[1].children[4].meta.loginmes = false;
      this.$router.push("/home/index");
      localStorage.setItem("user", "");
      localStorage.setItem("token", "");
    },
    userinfo() {
      this.$router.push("/userinfo");
    },
  },
};
</script>

<style scoped>
style attribute {
  font-size: 15px;
}
.blackCard {
  margin-top: 20px;
  border-radius: 10px;
  background: black;
  color: orangered;
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
}
.blackCard i {
  padding: 0 10px;
  display: block;
}
.me {
  width: 100%;
  height: 150px;
  background-color: orange;
  overflow: hidden;
}
.me-info {
  width: 180px;
  position: relative;
  margin: 20px 0 0 20px;
}
.portrait {
  width: 80px;
  height: 80px;
  background-color: orange;
  margin: auto 0;
}
.portrait img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.me span {
  display: block;
  position: absolute;
  right: 0;
  top: 40%;
  color: white;
}

.main {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: rgb(231, 214, 214);
}
.order {
  border-radius: 10px;
  margin: 20px auto;
  width: 85%;
  background-color: white;
}
.order div {
  text-align: left;
}
.order-1 {
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
}
.order-1 span {
  font-size: 18px;
  font-weight: 800;
}

.info {
  color: plum;
  height: 199px;
}
</style>
